<template>
  <el-container>
    <el-main v-loading.fullscreen.lock="fullscreenLoading">
      <el-form :disabled="disableForm" :inline-message="true" :rules="rules" ref="info" :model="info" label-width="120px" class="demo-ruleForm">
         <el-form-item label="设备编号" prop="deviceNo">
          <el-col :span="10">
          <el-input :disabled="true" v-model="info.deviceNo" placeholder="系统自动生成"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="设备名称" prop="deviceName">
          <el-col :span="10">
          <el-input v-model="info.deviceName" placeholder="例如:XXX"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="资产编号" prop="deviceAssetNo">
          <el-col :span="10">
          <el-input v-model="info.deviceAssetNo" placeholder="例如:XXX"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="铭牌号" prop="deviceNameplateNo">
          <el-col :span="10">
          <el-input v-model="info.deviceNameplateNo" placeholder="例如:XXX"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="所属分类" prop="deviceTopCategory">
          <el-col :span="11">
            <el-select v-model="info.deviceTopCategory" placeholder="一级分类">
              <el-option v-for="item in optionsTop"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item  prop="deviceSecondaryCategory">
          <el-col :span="11">
            <el-select v-model="info.deviceSecondaryCategory" placeholder="二级分类">
              <el-option label="炉膛" value="炉膛"></el-option>
              <el-option label="激光枪" value="激光枪"></el-option>
            </el-select>
          </el-col>
        </el-form-item>
         <el-form-item label="设备状态" prop="deviceStatus">
          <el-col :span="10">
            <el-select v-model="info.deviceStatus" placeholder="设备状态" >
              <el-option v-for="item in optionsStatus"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
          </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="设备位置" prop="deviceSeat">
          <el-col :span="10">
            <el-input v-model="info.deviceSeat" placeholder="例如:XXX"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item :inline="true" label="设备负责人">
          <el-select v-model="info.deviceManagerDepartment" placeholder="部门">
              <el-option label="信息管理部" value="D0903"></el-option>
              <el-option label="产品管理部" value="D0501"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :inline="true" prop="deviceManager">  
          <el-select v-model="info.deviceManager" placeholder="负责人">
              <el-option label="刘洪" value="leego"></el-option>
              <el-option label="吴敏林" value="allen"></el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item label="设备启用日期" prop="deviceUseDate">
          <el-col :span="10">
            <el-date-picker
             type="date"
             format="yyyy 年 MM 月 dd 日" 
             value-format="yyyy-MM-dd HH:mm:ss" 
             placeholder="启用日期"
             v-model="info.deviceUseDate">
            </el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="是否有维修合约">
          <el-col :span="10">
            <el-switch active-text="有" inactive-text="无" v-model="hasContract" @change="changeStatus"></el-switch>
          </el-col>
        </el-form-item>
        <el-form-item label="维护合约号" prop="deviceContractNo">
          <el-col :span="10">
           <el-input :disabled="isDisabled" v-model="info.deviceContractNo" placeholder="例如:XXX"></el-input> 
          </el-col>
        </el-form-item>
         <el-form-item label="维护购买日期" prop="devicePurchaseDate">
          <el-col :span="10">
            <el-date-picker 
              type="date" 
              format="yyyy 年 MM 月 dd 日" 
              value-format="yyyy-MM-dd HH:mm:ss" 
              :disabled="isDisabled" 
              placeholder="维护购买日期" 
              v-model="info.devicePurchaseDate">
            </el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="维护合约到期日" prop="deviceContractDueDate">
          <el-col :span="10">
            <el-date-picker 
              type="date"
              format="yyyy 年 MM 月 dd 日" 
              value-format="yyyy-MM-dd HH:mm:ss"  
              :disabled="isDisabled" 
              placeholder="维护合约到期日" 
              v-model="info.deviceContractDueDate">
            </el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="备注" prop="deviceRemark">
          <el-col :span="11">
            <el-input type="textarea" v-model="info.deviceRemark"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="updateDevice" >提交</el-button>
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>

<style lang="scss" scoped>
  section {
    padding-top: 20px;
  }
</style>

<script>
  import * as deviceApi from "@/api/device/index"
  
  export default {
    data() {
      return {
        hasContract: false,
        isDisabled: true,
        disableForm: false,
        fullscreenLoading: false,
        optionsTop: [{
          value: 'SC',
          label: '生产设备'
        }, {
          value: 'XZ',
          label: '行政设备'
        }, {
          value: 'Labs',
          label: '实验室设备'
        }, {
          value: 'IT',
          label: 'IT设备'
        }],
        optionsStatus: [{
          value: 0,
          label: '正常'
        },{
          value: 1,
          label: '停机'
        }],
        info: {
          id: 0,
          deviceNo: '',
          deviceName: '',
          deviceStatus: '',
          deviceAssetNo: '',
          deviceNameplateNo: '',
          deviceTopCategory: '',
          deviceSecondaryCategory: '',
          deviceProducer: '',
          deviceTenant: '', 
          deviceSeat: '',
          deviceManager: '',
          deviceManagerDepartment: '',
          deviceContract: 0,
          deviceContractNo: '',
          deviceUseDate: '',
          deviceContractDueDate: '',
          devicePurchaseDate: '',
          deviceRemark: ''
        },
        rules: {
          deviceName: [
            { required: true, message: '请填写设备名称', trigger: 'blur' }
          ],
          deviceAssetNo: [
            { required: true, message: '请填写资产编号', trigger: 'blur' }
          ],
          deviceNameplateNo: [
            { required: true, message: '请输入铭牌号', trigger: 'blur' }
          ],
          deviceStatus: [
            { required: true, message: '请选择状态', trigger: 'change' }
          ]
        }
      }
    },
    methods: {
      changeStatus (has) {
        this.isDisabled = has? false: true
        this.info.deviceContract = has? 1: 0
      },
      updateDevice () {
        this.fullscreenLoading = true
        deviceApi.updateDevice(this.info)
        .then(res => {
          this.fullscreenLoading = false

          if(res.code === 200) { 
            this.info = res.data
            this.hasContract = !!this.info.deviceContract
            this.isDisabled = !!!this.info.deviceContract 
            this.$message({
              message: res.message,
              type: 'success'
            });
          }
        })
      }
    },
    activated () {
      const id = this.$route.query.id
      this.$refs['info'].resetFields()
      if (id > 0) {
        deviceApi.getDeviceInfo({id: id}).then(res => {
          const code = res.code
          if (code === 200) {
            const device = res.data
            this.$nextTick(() => {
              this.info = device
              this.hasContract = !!this.info.deviceContract
              this.isDisabled = !!!this.info.deviceContract
            })
          }
          else {
            // 异常情况，冻结表单
            this.disableForm = true
            this.fullscreenLoading = false
          }
        })
      }
    }
  }
</script>

